<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="app-header.html">
<link rel="import" href="app-about.html">

<link rel="import" href="web-dash.html">

<dom-module id="my-app">
  <template>
    <style>
      :host {
        display: block;
        color: white;

        --paper-tooltip-background: rgba(0, 0, 0, 0.9);
        --paper-tooltip: {
          font-size: 15px;
          padding: 10px;
        }
        --paper-toast-background-color: #677780;
        --paper-toast: {
          padding: 3px 14px;
          margin: 0;
        }
      }

      h1 {
        margin-top: 0;
        margin-bottom: 10px;
      }

      h3 {
        margin-top: 0;
        color: rgba(255, 255, 255, 0.5);
      }

      .toast-button {
        color: white;
        font-weight: bold;
      }

      paper-toast {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 10000;
        /*must be higher than plugin-wrapper:hover*/
      }
    </style>

    <app-header app-name="{{appName}}" app-path="{{appPath}}"></app-header>

    <web-dash></web-dash>

    <app-about></app-about>

    <paper-toast duration="6000" id="toast">
      <paper-button class="toast-button" on-click="_reload">Reload</paper-button>
    </paper-toast>

  </template>

  <script>
    // Gesture events like tap and track generated from touch will not be
    // preventable, allowing for better scrolling performance.
    Polymer.setPassiveTouchGestures(true);

    class MyApp extends Polymer.Element {
      static get is() { return 'my-app'; }

      static get properties() {
        return {
          rootPath: String,
        };
      }

      ready() {
        super.ready();

        this.backend = new Backend('webdash');

        this._registerServiceWorker();
        this._getInfo();
        this._getConfig();
      }

      _reload() {
        requestAnimationFrame(() => {
          window.location.reload();
        });
      }

      _getInfo() {
        this.backend.get('info')
          .then(data => {
            this.appName = data.appName;
            this.appPath = data.appPath;
            this.version = data.version;

            window.dispatchEvent(new CustomEvent('webdash-info', {
              detail: data
            }));

            setTimeout(() => {
              if (window.gtag) {
                gtag('event', 'version', {
                  event_label: this.version,
                });
              }
            }, 3000);
          });
      }

      _getConfig() {
        this.backend.get('config')
          .then(data => {
            window.webdashConfig = data.config;
          })
      }

      _registerServiceWorker() {
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', () => {
            navigator.serviceWorker.register('service-worker.js', {
              scope: Polymer.rootPath,
            })
              .then(reg => {
                reg.onupdatefound = () => {
                  const installingWorker = reg.installing;

                  installingWorker.onstatechange = () => {
                    switch (installingWorker.state) {
                      case 'installed':
                        if (navigator.serviceWorker.controller) {
                          const toast = this.$.toast;
                          toast.text = 'New version available';
                          toast.open();
                        }
                        break;
                    }
                  };
                };
              });
          });
        }
      }
    }

    window.customElements.define(MyApp.is, MyApp);
  </script>
</dom-module>